import { css } from "./styles.js";
import { 
    render, 
    bindEvents, 
    loadCurrentVideo,
    play,
    pause
} from './scripts.js';

class VideoPlayer extends HTMLElement {
    constructor() {
        super();
        
        this.attachShadow({ mode: 'open' });
        
        // 视频数据
        this.videos = [
            {
                id: 1,
                src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
                poster: 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=600&fit=crop',
                title: '精彩短视频 #1',
                description: '这是第一个精彩的短视频，展示了美丽的风景和有趣的故事。',
                author: '创意工作室',
                authorAvatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&h=100&fit=crop&crop=face',
                hashtags: '#自然 #冒险 #创意 #分享',
                promotionImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop',
                backgroundMusic: 'https://www.soundjay.com/misc/sounds/magic-chime-02.mp3',
                backgroundMusicName: '魔法钟声',
                publishTime: '2024-01-15 14:30:00'
            },
            {
                id: 2,
                src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
                poster: 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=600&fit=crop',
                title: '精彩短视频 #2',
                description: '第二个视频带来了更多令人兴奋的内容和独特的视觉体验。',
                author: '视觉艺术',
                authorAvatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop&crop=face',
                hashtags: '#视觉 #体验 #艺术 #娱乐',
                promotionImage: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=800&h=600&fit=crop',
                backgroundMusic: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
                backgroundMusicName: '铃声响起',
                publishTime: '2024-01-16 09:45:00'
            },
            {
                id: 3,
                src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
                poster: 'https://images.unsplash.com/photo-1611162618071-b39a2ec055fb?w=400&h=600&fit=crop',
                title: '精彩短视频 #3',
                description: '这个视频展示了创意与技术的完美结合。',
                author: '科技创作者',
                authorAvatar: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=100&h=100&fit=crop&crop=face',
                hashtags: '#科技 #创意 #创新 #数字',
                promotionImage: 'https://images.unsplash.com/photo-1518709594023-6eab9bab7b23?w=800&h=600&fit=crop',
                backgroundMusic: 'https://www.soundjay.com/misc/sounds/digital-chime-01.mp3',
                backgroundMusicName: '数字音效',
                publishTime: '2024-01-17 16:20:00'
            },
            {
                id: 4,
                src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
                poster: 'https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=400&h=600&fit=crop',
                title: '精彩短视频 #4',
                description: '这个视频提供了高质量的视觉效果和丰富的内容体验。',
                author: '媒体专家',
                authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face',
                hashtags: '#质量 #媒体 #专业 #内容',
                promotionImage: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&h=600&fit=crop',
                backgroundMusic: 'https://www.soundjay.com/misc/sounds/orchestral-chime-01.mp3',
                backgroundMusicName: '管弦乐钟声',
                publishTime: '2024-01-18 11:15:00'
            },
            {
                id: 5,
                src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
                poster: 'https://images.unsplash.com/photo-1611162616475-46b635cb6868?w=400&h=600&fit=crop',
                title: '精彩短视频 #5',
                description: '最后一个视频呈现了令人惊叹的视觉效果和引人入胜的故事情节。',
                author: '故事讲述者',
                authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face',
                hashtags: '#故事 #视觉 #特效 #精彩',
                promotionImage: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=800&h=600&fit=crop',
                backgroundMusic: 'https://www.soundjay.com/misc/sounds/cinematic-chime-01.mp3',
                backgroundMusicName: '电影配乐',
                publishTime: '2024-01-19 20:00:00'
            }
        ];
        
        this.currentIndex = 0;
        this.isScrolling = false;
        this.scrollTimeout = null;
        
        this.init();
    }
    
    init() {
        // 渲染组件
        render(this.shadowRoot, css, this.videos);
        bindEvents(this);
        loadCurrentVideo(this);
    }
    
    // 公共方法
    play() {
        return play(this);
    }
    
    pause() {
        pause(this);
    }
    
    getCurrentVideo() {
        return this.videos[this.currentIndex];
    }
    
    getCurrentIndex() {
        return this.currentIndex;
    }
    
    getTotalVideos() {
        return this.videos.length;
    }
}

customElements.define('video-player', VideoPlayer);

export default VideoPlayer;